<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml"
      layout:decorate="~{front/common/framework}" xmlns:layout="http://www.w3.org/1999/xhtml">
<head>
  <title>会员购买-微信支付</title>
  <link rel="stylesheet" href="/static/front/css/vip-pay.css">
</head>
<body>
<th layout:fragment="content">
  <div class="ui_h2">
    <h2>微信支付</h2>
    <span class="ui_line red"></span>
  </div>
  <div class="pb150 center_wrap">
    <div class="wrapper">
      <div class="body wechat pb80">
        <div class="hd">
          <ul>
            <li class="order_no">订单号：2018032098449</li>
            <li>收款方：北京美素创意科技有限公司</li>
          </ul>
        </div>
        <div class="bd">
          <div class="money">支付</div>
          <div class="wx">
            <div id="qrcode" style="width:208px; height:208px;"></div>
          </div>
        </div>
        <div class="ft">请使用微信扫一扫，轻松完成支付</div>
      </div>
    </div>
  </div>
</th>
<th:block layout:fragment="script">
  <script type="text/javascript" src="/static/front/js/lib/qrcode.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".in-radio").ionCheckRadio();
      $('.header .wrapper .nav ul li').eq(3).addClass("on").siblings().removeClass("on");

      var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 208,
        height: 208
      });
      var orderNo = Util.getQueryString('orderNo');
      $.post('/account/getWeiXinPayQrcode', {orderNo: orderNo}, function (result) {
        $('.order-no').html('订单号:'+result.orderNo);
        qrcode.makeCode(result.codeUrl);
        polling.start(result.orderNo);
      })

      var polling = {
        start: function (orderId) {
          /*第一次读取最新通知*/
          setTimeout(function () {
            polling.query(orderId);
          }, 2000);
          /*1轮询读取函数*/
          intervalId = setInterval(function () {
            polling.query(orderNo);
          }, 1000);
        },

        query: function (orderId) {
          $.getJSON('/account/getPayStatus',{orderNo:orderNo},function (result) {
            if(result){
              window.close();
            }
          })
        }
      }

    })
  </script>
</th:block>

</body>
</html>

